<template>
  <div class="apply">

    <el-dialog :visible="showDialog" :title="title" @close="btnCancel">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        label-width="110px"
      >
        <!-- 申请表单 -->
        <el-form-item v-if="title==='申请'" label="申请类型" prop="processName">
          <el-select v-model="ruleForm.processName" placeholder="请选择申请类型" @change="select">
            <el-option label="离职" value="离职" />
            <el-option label="加班" value="加班" />
          </el-select>
        </el-form-item>
        <!-- 加班表单 -->
        <el-form-item v-if="(ruleForm.processName==='加班' || ruleForm.processName==='') && title==='申请'" label="加班开始时间" prop="start_time">
          <el-date-picker
            v-model="ruleForm.start_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item v-if="(ruleForm.processName==='加班' || ruleForm.processName==='') && title==='申请'" label="加班结束时间" prop="end_time">
          <el-date-picker
            v-model="ruleForm.end_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item v-if="(ruleForm.processName==='加班' || ruleForm.processName==='') && title==='申请'" label="补偿方式">
          <span>调休</span>
        </el-form-item>
        <el-form-item v-if="(ruleForm.processName==='加班' || ruleForm.processName==='' )&& title==='申请'" label="加班原因" prop="reason">
          <el-input
            v-model="ruleForm.reason"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 8}"
            style="width: 70%;"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!--离职表单-->
        <el-form-item v-if="ruleForm.processName==='离职' && title==='申请'" label="离职时间" prop="exceptTime">
          <el-date-picker
            v-model="ruleForm.exceptTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item v-if="ruleForm.processName==='离职' && title==='申请'" label="离职原因" prop="reason">
          <el-input
            v-model="ruleForm.reason"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 8}"
            style="width: 70%;"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!-- 请假表单 -->
        <el-form-item v-if="title==='请假'" label="请假类型" prop="processName">
          <el-select v-model="ruleForm.processName" placeholder="请选择请假类型" @change="select">
            <el-option label="请假" value="请假" />
            <el-option label="调休" value="调休" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="title==='请假'" label="申请单位">
          <span>{{ ruleForm.applyUnit }}</span>
        </el-form-item>
        <el-form-item v-if="title==='请假'" label="开始时间" prop="startTime">
          <el-date-picker
            v-model="ruleForm.startTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item v-if="title==='请假'" label="结束时间" prop="endTime">
          <el-date-picker
            v-model="ruleForm.endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>

        <el-form-item v-if="ruleForm.processName==='请假' && title==='请假'" label="请假时长" prop="duration">
          <el-input
            v-model="ruleForm.duration"
            type="text"
            style="width: 50%;"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item v-if="ruleForm.processName==='调休' && title==='请假'" label="申请天数" prop="duration">
          <el-input
            v-model="ruleForm.duration"
            type="text"
            style="width: 50%;"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item v-if="title==='请假'" label="申请原因" prop="reason">
          <el-input
            v-model="ruleForm.reason"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4}"
            style="width: 50%;"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { startProcess } from '@/api/approvals'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      ruleForm: {
        exceptTime: '',
        start_time: '',
        end_time: '',
        reason: '',
        duration: '',
        hilidayType: '',
        applyUnit: '按天',
        processKey: '', // 特定的审批
        processName: '',
        userId: this.$store.state.user.userInfo.userId
      }
      // rules: {
      //   exceptTime: [
      //     { required: true, message: '该项不能为空', trigger: 'blur' }
      //   ],
      //   reason: [
      //     { required: true, message: '该项不能为空', trigger: 'blur' }
      //   ]
      // }
    }
  },
  methods: {
    select(val) {
      // this.$refs.ruleForm.resetFields()
      this.ruleForm.processName = val
      if (val === '请假') {
        this.ruleForm.hilidayType = '1'
      } else if (val === '调休') {
        this.ruleForm.hilidayType = '0'
      }
    },
    // 确定
    async btnOK() {
      // 校验
      // await this.$refs.ruleForm.validate()
      if (this.ruleForm.processName === '离职') {
        this.ruleForm.processKey = 'process_dimission'
      } else if (this.ruleForm.processName === '加班') {
        this.ruleForm.processKey = 'process_overtime'
      } else {
        this.ruleForm.processKey = 'process_leave'
      }
      // 发请求
      await startProcess(this.ruleForm)
      // 提醒用户
      this.$message.success('提交成功')
      // 关闭弹窗
      this.$emit('update:showDialog', false)
    },
    // 取消
    btnCancel() {
      // 1. 清理表单
      this.ruleForm = {
        exceptTime: '',
        start_time: '',
        end_time: '',
        reason: '',
        duration: '',
        hilidayType: '',
        applyUnit: '按天',
        processKey: '', // 特定的审批
        processName: '',
        userId: this.$store.state.user.userInfo.userId
      }
      // console.log(this.ruleForm)
      this.$emit('update:title', '')
      // 2. 清理校验
      // this.$refs.ruleForm.resetFields()
      // 3. 关闭弹窗
      this.$emit('update:showDialog', false)
    },
    // 重置
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
